<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- 个性化样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/blogs.css">
    <!-- 字体图标库 -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- header -->
    <header id="header">
    </header><!-- ending-->
    <!-- main -->
    <main>
        <!-- section -->
        <section id="hero">
            <img class="portrait" src="./imgs/portrait.png" alt="">
            <p>我是一名大三学生，<br> 同时也是一名<span> Web前端工程师</span></p>
            <a class="about-me" href="./about.html">关于我</a>
        </section> <!-- ending  -->

        <!-- 作品展示 -->
        <section id="portfolio">
            <h2 class="section-title">作品展示</h2>
            <div class="carousel container">
                <div class="arrows">
                    <span class="prev invalid"></span>
                    <span class="next"></span>
                </div>
                <div class="imgs flex">
                    <div class="imgs-wrap">
                        <img src="./imgs/portfolios/1@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="imgs-wrap">
                        <img src="./imgs/portfolios/2@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="imgs-wrap">
                        <img src="./imgs/portfolios/3@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="imgs-wrap">
                        <img src="imgs/portfolios/1@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="imgs-wrap">
                        <img src="imgs/portfolios/2@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="imgs-wrap">
                        <img src="imgs/portfolios/3@2x.png" alt="" />
                        <div class="imgs-info">
                            <h4>App 1</h4>
                            <div class="imgs-links">
                                <a href="#"><i class="iconfont icon-link"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="more-box"><a class="btn orange look-more" href="./protfolio.html">查看更多</a></div>
        </section> <!-- ending -->
    </main>

    <!-- blogs -->
    <section id="blog">
        <h2 class="section-title blue">作品展示</h2>
        <div class="container article-wrap">
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog1.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog2.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog3.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe
                        whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog4.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe
                        whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog5.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe
                        whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
            <article>
                <a href="blog-single.html"><img src="./imgs/blogs/blog6.png" alt=""></a>
                <div class="content-wrap">
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi
                        od09mefqwe
                        whjiojf0jis js </p>
                    <div class="flex wrap">
                        <span class="date"><i class="iconfont icon-clock"></i>2022-07-21</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont icon-arrowright"></i></a>
                    </div>
                </div>
            </article>
        </div> -->
    </section><!-- End 我的博客 -->
    </main><!-- Ending -->

  <!-- ======= Footer ======= -->
  <footer>© Copyright tiro. All Rights Reserved </footer><!-- End Footer -->
</body>
<!-- 动态背景 -->
<script src="./js/spider.js"></script>
<!-- 公共js文件 -->
<script src="./js/main.js"></script>
<!-- 主js文件 -->
<script src="./js/index.js"></script>
<script src="./js/blogs.js"></script>

</html>